<template>
    <div class="naviPane">
      <div class="logo">
        <a href="/">
          <img src="../../../../static/images/logo.png">
        </a>
      </div>
      <div class="naviInfo">
        <ul>
          <li><a href="/">首页</a></li>
          <li><a href="#">竞彩资讯</a></li>
          <li><a href="#">帮助中心</a></li>
          <li class="mainMenu">账户设置
            <ul class="subMenu">
              <li>安全设置
                <ul class="thirdMenu">
                  <li><a href="#">修改账户密码</a></li>
                  <li><a href="#">手机绑定</a></li>
                  <li><a href="#">其他</a></li>
                </ul>
              </li>
            </ul>
            <ul class="subMenu">
              <li>个人资料
                <ul class="thirdMenu">
                  <li><a href="#">修改头像、昵称</a></li>
                </ul>
              </li>
            </ul>
            <ul class="subMenu">
              <li>账号绑定
                <ul class="thirdMenu">
                  <li><a href="#">微信绑定</a></li>
                  <li><a href="#">支付宝绑定</a></li>
                </ul>
              </li>
            </ul>
            <ul class="subMenu">
              <li>钱包
                <ul class="thirdMenu">
                  <li><a href="#">余额</a></li>
                  <li><a href="#">账户明细</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>

      </div>
    </div>

</template>

<script>

  export default {
    name: "navi",
    components: {}
  }
</script>

<style scoped lang="stylus">

  .naviPane
    position relative
    z-index 2

    :after
      clear: both;
      content: "";
      display: block
    background-color #4a88d9
    height 60px
    width 1000px
    margin 0 auto
    border-radius 3px

    .naviInfo
      height 60px
      line-height 60px
      width 750px
      float left

      ul
        margin 0
        padding 0
        height 60px

        :after {
          clear: both;
          content: "";
          display: block
        }
        line-height 60px
        list-style none

        .mainMenu
          &:hover
            .subMenu
              display block
          position: relative;

        li


          color white
          width 150px
          height 60px
          float left
          a
            text-decoration: none;color: white;

          ul
            display none

            &:hover
              .thirdMenu
                display block

            li
              background-color #4a95ff
              color white
              line-height 50px
              text-align center

              ul
              .thirdMenu
                position absolute
                top 60px
                left 120px
                background-color #4a95ff
                width 120px
                height 150px
                display none

                li
                  a

                    color #ffffff
                    text-decoration none


    .logo
      margin-left 20px
      width 180px
      height 60px
      float left

      a
        text-decoration: none
        color #ffffff

      img
        width 60px
        height 60px

</style>
